<!DOCTYPE html>

<html>
<head>
    <title>Bouncing Balls运动小球</title>

    <meta charset="UTF-8">

    <style>
        body {
            background: #dddddd;
        }

        #canvas {
            margin-left: 10px;
            margin-top: 10px;
            background: #ffffff;
            border: thin solid #aaaaaa;
        }

        #glasspane {
            position: absolute;
            left: 50px;
            top: 50px;
            padding: 0px 20px 10px 10px;
            background: rgba(0, 0, 0, 0.3);
            border: thin solid rgba(0, 0, 0, 0.6);
            color: #eeeeee;
            font-family: Droid Sans, Arial, Helvetica, sans-serif;
            font-size: 12px;
            cursor: pointer;
            -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
            box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
        }

        #glasspane h2 {
            font-weight: normal;
        }

        #glasspane .title {
            font-size: 2em;
            color: rgba(255, 255, 0, 0.8);
        }

        #glasspane a:hover {
            color: yellow;
        }

        #glasspane a {
            text-decoration: none;
            color: #cccccc;
            font-size: 3.5em;
        }

        #glasspane p {
            margin: 10px;
            color: rgba(65, 65, 220, 1.0);
            font-size: 12pt;
            font-family: Palatino, Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
<!--玻璃窗格 glass pane-->
<div id='glasspane'>
    <h2 class='title'>弹射小球</h2>

    <p>一百个小球弹射</p>

    <a id='startButton'>Start</a>
</div>

<canvas id='canvas' width='750' height='500'>
    Canvas not supported
</canvas>

<script>
    var context = document.getElementById('canvas').getContext('2d'),
        startButton = document.getElementById('startButton'),
        glasspane = document.getElementById('glasspane'),
        paused = true,
        circles = [];

    drawGird(context, 'lightgray', 10, 10);

    context.lineWidth = 0.5;
    context.font = '32pt Ariel';

    //给100个小球设置不同的方向，半径，颜色
    for (var i = 0; i < 100; i++) {
        circles[i] = {
            x: 100,
            y: 100,
            //向x方向移动的像素
            velocityX: 3 * Math.random(),
            velocityY: 3 * Math.random(),
            radius: 50 * Math.random(),
            color: 'rgba(' + (Math.random() * 255).toFixed(0) + ',' +
                (Math.random() * 255).toFixed(0) + ',' +
                (Math.random() * 255).toFixed(0) + ',1.0)'
        };
    }

    startButton.onclick = function (ev) {
        //取消默认行为
        ev.preventDefault();
        //阻止冒泡
        ev.stopPropagation();
        paused = !paused;
        startButton.innerText = paused ? '启动' : '暂停';
    };

    glasspane.onmousedown = function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
    };

    context.canvas.onmousedown = function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
    };

    setInterval(function () {
        if (!paused) {
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
            drawGird(context, 'lightgray', 10, 10);

            circles.forEach(function (circle) {
                context.beginPath();
                context.arc(circle.x, circle.y, circle.radius,
                    0, Math.PI * 2, false);
                context.fillStyle = circle.color;
                context.fill();
                adjustPosition(circle);


            });
        }
    }, 1000 / 60);

    /**
     * 调整每个球的位置,如果触碰到边缘，就调整方向
     * @param circle
     */
    function adjustPosition(circle) {
        if (circle.x + circle.velocityX + circle.radius > context.canvas.width || circle.x - circle.radius + circle.velocityX<0)
            circle.velocityX = -circle.velocityX;

        if (circle.y + circle.velocityY + circle.radius > context.canvas.height || circle.y - circle.radius + circle.velocityY<0)
            circle.velocityY = -circle.velocityY;

        circle.x += circle.velocityX;
        circle.y += circle.velocityY;
    }

    /**
     * 画网格线
     * @param context
     * @param color
     * @param stepX X方向网格间距
     * @param stepY Y方向网格间距
     */
    function drawGird(context,color,stepX,stepY) {
        context.strokeStyle = color;
        context.lineWidth = 0.5;

        for (var i = stepX+0.5;i<context.canvas.width;i+=stepX){
            context.beginPath();
            context.moveTo(i,0);
            context.lineTo(i, context.canvas.height);
            context.stroke();
        }

        for (var i = stepY + 0.5; i < context.canvas.height; i+=stepY) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
            context.stroke();
        }
    }
</script>
</body>
</html>
